<script setup lang="ts">
import { computed, ref } from "vue";

const list = ref([
  { id: 1, name: "篮球", num: 1 },
  { id: 2, name: "玩具", num: 2 },
  { id: 3, name: "铅笔", num: 5 },
]);

// computed 计算的结果是响应式的，如果内部数据发生变化，那么计算结果也会变化
const totalCount = computed(() => {
  // 通过reduce方法遍历列表，累加每个元素的数量，以计算总数
  return list.value.reduce((acc, item) => acc + item.num, 0);
});
</script>

<template>
  <div id="app">
    <h3>小白的礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ totalCount }} 个</p>
  </div>
</template>

<style scoped>
table {
  border: 1px solid #000;
  text-align: center;
  width: 240px;
}

th,
td {
  border: 1px solid #000;
}

h3 {
  position: relative;
}
</style>
